<template>
<div class="page_index">
  <div class="header">
    <a class="chatBox" href="tel:400-962-5108"></a>
      <img class="logo" src="@a/img/logo.png" alt="">
      <div class="right_f">
        <div class='tiyan' @click="toPage('experience')">立即体验</div>
        <div class='menu_btn' v-show="!isMenu" @click="isMenu=true"></div>
        <div class='menu_btn menu_btn1' v-show="isMenu"  @click="isMenu=false"></div>
      </div>
      <Drawer class="menu-content" :closable="false" v-model="isMenu">
        <div class="item" @click="toPage('home')">首页</div>
        <div class="item" @click="toPage('consultingService')">产业链咨询</div>
        <div class="item" @click="toPage('industryInsight')">产业链招商</div>
        <div class="item" @click="toPage('IndustryBrain')">产业大脑</div>
        <div class="item" @click="toPage('industryService')">产业服务</div>
        <div class="item" @click="toPage('about')">中心及研究院</div>
        <div class="item" @click="toPage('news')">产业链资讯</div>
      </Drawer>
  </div>
  <div v-show="isMenu"></div>
  <div class='i_content' ref="main">
    <router-view/>
    <div v-show="$route.name=='home'" class="forth_box">
      <h1>园域 <span>AI赋能产业定位  数字驱动精准招商</span></h1>
      <div class='note'>Copyright ©2021 上海产业合作促进中心园域产业研究院 . <a href="https://beian.miit.gov.cn">沪ICP备16013225号-2 sicpc.cn</a></div>
    </div>
    <div v-show="$route.name!='home'" class="bottom">
      <div class="logo_b"></div>
      <div class="code"><img src="~@a/img/2wm.jpg" alt=""></div>
      <div class="text">长按识别二维码，关注园域公众号</div>
      <!-- <div class='btn'> <a href='tel:400-962-5108'>联系电话：400-962-5108 </a></div> -->
      <div class='note'>Copyright ©2021 上海产业合作促进中心园域产业研究院 . <a href="https://beian.miit.gov.cn/">沪ICP备16013225号-2 sicpc.cn</a></div>
    </div>
  </div>
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
import {share} from '@/api/api.js'
const Base64 = require('js-base64').Base64

export default {
  data(){
    return{
      isMenu:false
    } 
  },
  mounted(){
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    }else{
      window.location.href = 'http://www.parkic.com/#/'+window.location.href.split('/#/')[1]
    }
    window.addEventListener("resize", 
      ()=>{
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        }else{
          window.location.href = 'http://www.parkic.com/#/'+ window.location.href.split('/#/')[1]//this.$route.name
        }
      }
    );
    this.wxShare()
  },
  watch:{
    '$route.name':function(val){
      let main = this.$refs.main
      this.wxShare()
      main.scrollTo(0,0)
      if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        
      }else{
        window.location.href = 'https://www.parkic.com/#/'+ window.location.href.split('/#/')[1]
      }
    }
  },
  methods:{
    toPage(name){
      this.$router.push( name )
      this.isMenu=false
    },
    wxShare() {
      let _this = this
      share({url: Base64.encode(window.location.href)}).then(res=>{
        if(res.status==1){
          var Data = res.data;
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作
          wx.config({
            debug: false, // 开启调试模式,开发时可以开启 
            appId: Data.appId,  // 必填，公众号的最好标识  由接口返回
            timestamp: Data.timestamp, // 必填，生成签名的时间戳 由接口返回
            nonceStr: Data.nonceStr,    // 必填，生成签名的随机串 由接口返回
            signature: Data.signature,  // 必填，签名 由接口返回
            jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
          });
          sessionStorage.url = this.$route.name
          if(this.$route.name=='detail'){
            return
          }
          wx.ready(() => {
          //分享给朋友
            wx.onMenuShareAppMessage({
              title: document.title+' | 园域', // 分享标题
              desc: '园域产业研究院应用大数据和人工智能技术，为地方政府提供基于产业链精准分析和服务的产业研究机构', // 分享描述
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:'http://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/5/2020/11/share.png', // 分享图标
              type: '', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
              }
            })
            //分享到朋友圈
            wx.onMenuShareTimeline({ 
              title: document.title+' | 园域', // 分享标题
              link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: 'http://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/5/2020/11/share.png', // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数
              },
              cancel: function () {
                // 用户取消分享后执行的回调函数
              }
            })
          })
        }else{
          this.$Message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.page_index{
  height: 100%;
  width: 100%;
}
 .header{
    width: 100%;
    color: #fff;
    text-align: center;
    z-index: 1000;
    height: 56px;
    display:flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255,255,255,1)!important;
    box-shadow: 0 2px 12px 0 rgba(0 ,0 ,0 , .1);
    .chatBox{
      width: 74px;
      height: 74px;
      position: fixed;
      right: 4px;
      background:url(~@a/img/chatBg.png) 0 0 no-repeat;
      bottom: 28px;
      background-size: 100% 100%;
      z-index: 1000;
    }
      .logo{
        // width: 81px;
        height: 40px;
        margin-left: 16px;
        cursor: pointer;
      }
      .right_f{
        display:flex
      }
      .tiyan{
        width: 88px;
        height: 56px;
        background-color: #1a63c4;
        text-align: center;
        line-height: 56px;
        font-size: 14px;
        color: #fff;
     }
     .menu_btn{
        width: 56px;
        height: 56px;
        background: url(~@a/img/menu_btn.png) no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;
     }
     .menu_btn1{
        background: url(~@a/img/menu_btn1.jpg) no-repeat;
        background-size: 80% 80%;
        background-position:center;
     }
  }
.i_content{
  width:100%;
  height:calc(100% - 56px);
  overflow:auto;
}
.menu-content{
  .item{
    height: 46px;
    line-height:46px;
    font-size:18px;
    // border-bottom: 0.1rem solid #ccc;
    padding: 0 10px;
    margin:0 10px;
    position: relative;
    &::after{
      content:' ';
      position: absolute;
      height: 10px;
      width: 10px;
      border-top: 1px solid #ccc;
      border-right: 1px solid #ccc;
      transform: rotate(45deg);
      right: 10px;
      top: 18px;
    }
    &:active{
      background:rgba(#000,0.2)
    }
  }
}
.forth_box {
  background: url(~@a/img/bottom.png) 0 0 no-repeat;
  background-size: 100% 100%;
  height: 184px;
  padding-top: 45px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  h1{
    font-size: 18px;
    text-align: center;
    color: #fff;
     span{
      font-size: 16px;
      padding-left: 10px;
      font-weight: 400;
    }
  }
  .note{
    margin-top:40px;
    color: #fff;
    width: 80%;
    margin-left:10%;
    a{
      color: #fff;
    }
  }
 
}
.bottom{
  width: 100%;
  height: 300px;
  background-color: #112f50;
  padding-top: 0.5px;
  padding-bottom: 10px;
  .logo_b{
    display: block;
    width: 250px;
    height: 60px;
    margin: 24px auto 16px;
    background: url(~@a/img/logo_b.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .code{
    display: block;
    width: 100px;
    height: 100px;
    margin: 0px auto 12px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .text{
    width: 100%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin: 0 auto 24px;
  }
  .btn{
    width: 311px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 16px;
    margin: 24px auto 8px;
    background-color: #f69e33;
    a{
      color: #fff;
    }
  }
  .note{
    opacity: .2;
    width: 80%;
    margin-left:10%;
    text-align: center;
    font-family: MicrosoftYaHeiUI;
    font-size: 9px;
    color: #fff;
    a{
      color: #fff;
    }
  }
}
</style>
<style >
.ivu-drawer-body{
    padding:0 !important;
}
</style>